<template>
	<ComIndex ref="commonIndexRef" :toggleView="false" :showFilter="false" :params="{ dataType: tabValue, keywords, menuType }" :isInitList="false" :initApi="false" :getListFun="ApiFieldsList">
		<template #search>
			<Search :showSearch="false" >
				<template #right>
					<a-button type="primary" @click="addModelRef.edit({})">
						<template #icon><icon-plus /></template>
						{{ $t("dataModel.addObj") }}
					</a-button>
				</template>
			</Search>
		</template>
		<template #default="{ dataList }">
			<div class="base-padding h100" style="padding: 10px">
				<ComTips v-if="menuType===0" :tips="$t('dataModel.dataModelTips')"></ComTips>
				<ComTips v-else-if="menuType===1" :tips="$t('dataModel.fieldModelTips')"></ComTips>
				<ComTabs style="margin-bottom: 10px" v-model="tabValue" :card="false" :options="fieldDataType" @change="commonIndexRef?.getList">
					<!-- @keyup.enter="commonIndexRef?.getList" -->
					<a-input :style="{ width: '300px' }" v-model="keywords" :placeholder="$t('dataModel.filterObj')" allow-clear @keyup="commonIndexRef?.getList">
						<template #prefix>
							<icon-search />
						</template>
					</a-input>
				</ComTabs>
				<ComTable :loading="commonIndexRef?.loading" row-key="name" @change="handleChange" :draggable="{}" :pagination="false" :columns="columns" :data="dataList">
					<template #name="{ record }">
						<ComLink
							@update="(data) => addModelRef.updateFn({ ...record, ...data })"
							:inputDisabled="record.dataType === 0"
							v-model:status="record.status"
							@click="handleDetail(record)"
							edit
							:labelShort="record.labelShort"
							:icon="record.ico"
							:text="record.name"
						/>
					</template>
				</ComTable>
				<addModel ref="addModelRef" @update="handleUpdate" :menuType="menuType"></addModel>
			</div>
		</template>
	</ComIndex>
</template>
<script lang="ts" setup>
import { ApiFieldsList, sortChangeBiz } from "@/api/customerManage/setting";
import ComIndex from "@/components/ComIndex/Index.vue";
import { useMessage } from "@/hooks/useMessage";
import ComTable from "@/components/ComTable/ComTable.vue";
import { fieldDataType, menuTypeList } from "@/utils/filter";
import ComLink from "@/components/ComLink.vue";
import ComTabs from "@/components/ComTabs/ComTabs.vue";
import ComTips from "@/components/ComTips.vue";
import Search from "@/components/ComIndex/Search.vue";
import { useI18n } from "@/hooks/useI18n";
import addModel from "./components/addModel.vue";
import { useMenu } from "@/store/modules/useMenu";
const menuStore = useMenu();
const addModelRef = ref({});
const { t } = useI18n();
const message = useMessage();
const commonIndexRef: any = ref(null);
const tabValue = ref(0);
const router = useRouter();
const keywords = ref("");

defineProps({
	menuType: {
		type: Number,
		default: 0
	}
});

const columns = [
	{
		title: t("dataModel.name"),
		slotName: "name",
		width: 270
	},
	{
		title: t("dataModel.menu"),
		slotName: "menuType",
		dict: menuTypeList,
		width: 120
	},
	{
		title: t("dataModel.field"),
		slotName: "configCount",
		width: 120
	},
	{
		title: t("dataModel.example"),
		slotName: "dataCount",
		width: 90
	},
	{
		title: t("dataModel.sort"),
		slotName: "sort",
		width: 90,
		sort: true
	}
];

const handleChange = async (_data) => {
	commonIndexRef.value.dataList = _data;
	const arr = _data.map((item, index) => {
		return {
			key: item.id,
			value: index + 1
		};
	});
	await sortChangeBiz(arr);
	commonIndexRef.value.getList();
	message.success("排序成功");
};
const handleDetail = (row) => {
	router.push({
		name: "settingField",
		query: {
			id: row.id
		}
	});
};

const loading = ref(false);
const handleUpdate = () => {
	commonIndexRef.value?.getList();
	menuStore.setUpdateFlag();
};
</script>
